<template>
    <h1>筛选商品</h1>
    <div>
        分类:
        <el-select clearable   v-model="query.category" class="m-2" placeholder="Select" size="large">
            <el-option v-for="item in categorys" :key="item" :label="item" :value="item" />
        </el-select>
        搜索条件：
        <el-input v-model="query.search"></el-input>
        <el-button @click="searchfun">查询</el-button>
    </div>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="proid" label="编号" width="180" />
        <el-table-column label="图片" width="180">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="180" />
        <el-table-column prop="brand" label="品牌" width="180" />
        <el-table-column prop="originprice" label="价格" width="180" />
        <el-table-column prop="discount" label="折扣" width="180" />
        <el-table-column prop="sales" label="销量" width="180" />
        <el-table-column prop="stock" label="库存" width="180" />
        <el-table-column label="是否推荐">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" />
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import service from '../../../utils/service';

const categorys = reactive<string[]>([])
const getcategorys = () => {
    service({
        url: "/pro/getCategory"
    }).then(res => {
        if (res.data.code === "200") {
            categorys.length = 0;
            categorys.push(...res.data.data)
        }
    })
}
getcategorys()

//定义查询条件
const query = reactive<{
    category?: string,
    search: string
}>({})


interface IGoods {
    brand: string,
    category: string,
    desc: string,
    discount: number,
    img1: string,
    isrecommend: number,
    issale: number,
    isseckill: number,
    originprice: number,
    proid: string,
    proname: string,
    sales: number,
    stock: number
}

const list = reactive<IGoods[]>([]);
const searchfun = () => {
    service({
        url: "/pro/searchPro",
        method: "post",
        data:query
    }).then(res => {
        if (res.data.code == "200") {
            list.length = 0;
            list.push(...res.data.data)
        }
    })
}
searchfun();
</script>

<style scoped>
.img{
    width: 200px;
    height: 150px;
}
</style>